<template>
  <!-- 聊天室 -->
  <div class="video-page consult-container">
    <div class="video-panel">
      <audio id="dingding">
        <source src="@/assets/music/dingding.mp3" type="audio/mpeg">
      </audio>
      <AgoraVideo :inviteList="inviteList" :applyForm="applyForm" v-if="agoraConfig.appId" :agoraConfig="agoraConfig">
      </AgoraVideo>
      <el-row type="flex" class="row-bg" justify="space-between" :gutter="20">
        <el-col :span="16">
          <div class="video-frame video-center-top">
            <div class="video-title u-flex-box flex-row-between">
              <div>
                <div class="icon-size">
                  <img src="@/assets/img/icon_case.png" alt="">
                </div>
                <span>患者信息</span>
              </div>
            </div>
            <div class="inquiry-frame">
              <ul class="inquiry-content">
                <li>姓名：{{applyForm.inquiryPatientName}}</li>
                <li>性别： {{ applyForm.inquiryPatientSex ? applyForm.inquiryPatientSex == 1 ? '男' : '女' : '未知' }}</li>
                <li>年龄：{{applyForm.inquiryPatientAge}}</li>
                <li class="content-big">主诉：{{applyForm.mainSuit}}</li>
                <li>会诊目的：{{applyForm.rcsPurpose}}</li>
                <li class="content-big">简要病史及诊治过程：{{applyForm.presentIllness}} </li>
                <li>过敏史：{{applyForm.historyPresentIllness||'无'}}
                  <span class="icon-size" @click="openDialog">
                    <i class="iconfont iconedit"></i>
                  </span>
                </li>
                <li class="content-big">
                  <span>会诊诊断：</span>
                  <span class="tag-name-group">
                      {{applyForm.diagnosis}}
                  </span>
                  <span class="icon-size"
                        @click="openDiagnosisDialog(applyForm.diagnosisJson)">
                      <i class="iconfont iconedit"></i>
                  </span>
                </li>
<!--                <li>会诊意见：{{applyForm.remark||'无'}}-->
<!--                  <span class="icon-size" v-if="isExpert" @click="openDialogRemark"> <i class="iconfont iconedit"></i></span>-->
<!--                </li>-->
                <li class="content-big">
                  <span>会诊诊断：</span>
                  <div style="flex-grow: 1;display: flex;flex-wrap: wrap" v-if="applyForm.files">
                    <el-image :key="image" :preview-src-list="applyForm.files.split(',')" v-for="image in applyForm.files.split(',')" :src="image" style="margin: 12px;width: 120px;height: 120px; border: 1px dashed #d9d9d9;"></el-image>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="video-frame video-center-bottom" style="min-height: initial">
            <div :class="['chat__handle']">
              <div class="handle__item" @click="checkCase">
                <img class="item__icon" src="@/assets/img/remote/view.png" alt="">
                <p class="item__txt">查询病历</p>
              </div>
              <div class="handle__item" style="position: relative">
                <img class="item__icon" src="@/assets/img/remote/pic.png" alt="">
                <p class="item__txt">发送图片
                  <ImageUpload class="consult-upload" ref="uploadPic" :upload-params="ossParams" :multiple="false" @change="val => handleChangeUpload(val, 'imageUrl')"></ImageUpload>
                </p>
              </div>
              <div class="handle__item" @click="remoteVideo">
                <img class="item__icon" src="@/assets/img/remote/video_disabled.png" alt="">
                <p class="item__txt">远程影像</p>
              </div>
              <div class="handle__item" @click="closeRemote">
                <img class="item__icon" src="@/assets/img/remote/end.png" alt="">
                <p class="item__txt">结束会诊</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="video-frame video-right-top">
            <div class="video-title u-flex-box flex-row-between">
              <div>
                <div class="icon-size">
                  <img src="@/assets/img/icon_case.png" alt="">
                </div>
                <span>聊天窗口</span>
              </div>
            </div>
            <div class="chat-box video-right-bottom" style="min-height: 400px">
              <div class="chat-content" id="scrollContent" style="height: 340px">
                <div v-for="(item,index) in chatRoomMsgList" :key="index">
                  <p class="chat-head">
                    <span :class="trueName !== item.msgUserName ? 'chat-color' :''">[{{ item.msgUserName }}（{{ item.senderType}}）]</span>
                    <span>{{item.msgDate}}</span>
                  </p>
                  <div class="chat-msg" v-if="item.msgType == 1" @contextmenu.prevent="openMenu(item,$event)">
                    <viewer style="display:inilne-block;">
                      <img :src="item.msgText" width="100" title="点击预览">
                    </viewer>
                  </div>
                  <p class="chat-msg" v-if="item.msgType == 2" @contextmenu.prevent="openMenu(item,$event)">{{item.msgText}}</p>
                  <el-alert v-if="item.msgType == 5" class="chat-alert" :title="item.msgText" type="info" center :closable="false"> </el-alert>
                  <ul class="chat-withdraw" v-if="isWithdraw && item.msgType != 4" :style="{left:left+'px',top:top+'px'}">
                    <li @click="withdrawHandle(item.msgDate)">撤回</li>
                    <li @click="isWithdraw = false">取消</li>
                  </ul>
                </div>
              </div>
              <el-row class="chat-btn" type="flex" justify="space-between">
                <el-input size="small" class="btn-input" v-model="sendMsgToPatient" @keyup.enter.native="doctorSendMsg">
                  <el-button slot="append" size="small" type="primary" @click="doctorSendMsg">发送</el-button>
                </el-input>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--过敏史弹框 start-->
    <el-dialog
        class="dialog-frame"
        width="500px"
        title="过敏史"
        :visible.sync="allergyHistoryDialog"
        @close="allergyHistoryDialog = false"
        :close-on-click-modal="false"
        :close-on-press-escape="false">
      <div>
        <el-radio v-model="isAllergy" label="1">有过敏史</el-radio>
        <el-radio v-model="isAllergy" label="2">无过敏史</el-radio>
      </div>
      <div v-if="isAllergy == '1'" style="margin-top:20px">
        <el-input v-model="isAllergyInput" style="resize:none;" type="textarea" :autosize="{ minRows: 5}"></el-input>
      </div>
      <div slot="footer" class="dialog-btn">
        <el-button size="small" @click="closeDialog">取 消</el-button>
        <el-button type="primary" size="small" :loading="allergyLoading" @click="updateAllergyHistory">确 定</el-button>
      </div>
    </el-dialog>

    <!--会诊诊断 start-->
    <el-dialog
        class="dialog-frame"
        width="500px"
        title="会诊意见"
        :visible.sync="remarkDialog"
        @close="remarkDialog = false"
        :close-on-click-modal="false"
        :close-on-press-escape="false">

      <el-form :model="remarkForm">
        <el-form-item label="会诊意见" prop="remark">
          <el-input v-model="remarkForm.value" type="textarea" :autosize="{ minRows: 5}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-btn">
        <el-button size="small" @click="remarkDialog = false">取 消</el-button>
        <el-button type="primary" size="small" :loading="allergyLoading" @click="updateRemark">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 诊断弹框 start -->
    <diagnosis-dialog ref="diagnosisDialogComponent"
                      @save="closeDialogComponent"
    ></diagnosis-dialog>
    <!-- 诊断弹框 end -->
    <!-- ------------------ 查看病历 ------------------ -->
    <case-history ref="caseHistory"></case-history>

      <el-dialog
          title="请扫描二维码"
          :visible.sync="esignUrlDialog"
          :close-on-click-modal="false"
          width="360px"
          center
          class="qr-dialog"
      >
        <div class="qr-content">
          <!-- 二维码图片 -->
          <div class="qr-wrapper">
            <img
                v-if="esignUrl"
                :src="esignUrl"
                alt="二维码"
                class="qr-img"
            >
          </div>
        </div>

        <!-- 可选：自定义底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClosePage">确认，并退出会诊</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import CaseHistory from "../case-history";
import AgoraVideo from "./AgoraVideo3";
import ImageUpload from "@/components/image-upload/image-upload";
import UpdateDisease from "../../videoroom/components/DiseaseDialog.vue";
import DiagnosisDialog from "../diagnosisDialog/diagnosisDialog.vue";
import dict from '@/utils/dict';
import { Loading } from "element-ui";
export default {
  components: {
    UpdateDisease,
    CaseHistory,
    AgoraVideo,
    ImageUpload,
    "diagnosis-dialog": DiagnosisDialog,
  },
  data() {
    return {
      ossParams: null,
      applyForm: {},
      patientObj: {},
      chatRoomMsgList: [],
      friendId: "",
      isWithdraw: false,
      logId: '',
      sendMsgToPatient: '',
      doctorList: [],
      inviteList: [],
      agoraConfig: {
        appId: '',
        token: '',
        channel: '',
        // appId: "3252d76fde2e46668cb0fd11d4e61ff3", //你的AppId
        // token: "007eJxTYNgnOSuXf2uNSmf7tdTX368mlNmruMc/bPr47FMX7/MdFaIKDMZGpkYp5mZpKalGqSZmZmYWyUkGaSmGhikmqWaGaWnGynds0hsCGRnecPuxMDJAIIjPzGBuacHAAACOwh+G", // 根据房间号生成的token(房间号和token对应)
        // channel: "798", //频道号
        uid: '' //uid必须为数字类型
      },
      allergyHistoryDialog: false,
      allergyLoading: false,
      isAllergy: '1',
      isAllergyInput: '',
      remarkDialog: false,
      remarkForm: {
        value: ''
      },
      esignUrl: '',
      esignUrlDialog: false
    };
  },
  computed: {
    trueName() {
      console.log('this.$authInfo.getUser().trueName',this.$authInfo.getUser().trueName)
      return this.$authInfo.getUser().trueName;
    },
    isExpert() {
      const adminUserInfoStr = this.$getStore('adminUserInfo')
      if (!adminUserInfoStr) return false
      let adminUserInfo = JSON.parse(adminUserInfoStr)
      // 专家 isExpert
      return  adminUserInfo.type === 'D-E'
    },
    //在computed方法声明并存储到vuex
    getWsMsg() {
      return this.$store.state.webSocketMsgRemoteMsg;
    },
  },
  watch: {
    //监听
    getWsMsg(data, val) {
      if (data != "pong" && data != "") {
        let packageType = data.code;
        switch (packageType) {
          case 1:
            if (data.configuration) {
              this.agoraConfig = {
                appId: data.configuration.appId || '',
                token: data.configuration.sig || '',
                channel: this.$route.query.id,
                uid: data.userId,
                // appId: 'e1ed60810ee2479591fc0fe1dc00523b', // 替换为你的 Agora AppID
                // token: "007eJxTYNhZ+ESs50zNP30x53t2leXrT8ryMXT/V3mySzAqYGb8yt8KDKmGqSlmBhaGBqmpRibmlqaWhmnJBmmphinJBgamRsZJrJsi0xsCGRl0ed6wMjJAIIjPxGBsycAAAASZHX0=", // 根据房间号生成的token(房间号和token对应)
              }
              console.log('data.configuration',data.configuration);
            }
            console.log('登录成功',this.agoraConfig)
            /**
             * 登录成功
             * 任意人都可以创建会诊
             */
            if (this.applyForm.status === 2) {
              this.createRoom()
            }
            // 循环邀请医生、专家入会
            this.inviteDoctorJoinRoom()
            // 邀请病人加入
            this.invitePatientJoinRoom()
            break
          case 4:
            console.log('消息', data)
            // 解析消息
              this.chatRoomMsgList.push({
                msgUserName: data.sender,
                msgText: data.content,
                msgDate: this.formatDate(new Date(data.timestamp)),
                msgType: data.contentType,
                senderType: this.getsenderType(data.senderType),
              });
            this.scrollContentBottom();
            break
          case 6:
            if (!this.esignUrl) {
              this.$message({
                type: 'success',
                message: '会诊结束'
              })
              // 退出当前页面
              this.$router.back();
            }
            this.$store.commit('SET_REMOTE_ID', '')
            break
        }
      }
    },
    isWithdraw(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    }
  },
  methods: {
    // 更新会诊意见
    updateRemark() {
      this.$ajax.updatePatientDiseaseInfo({
        rcsLogId: this.$route.query.id,
        remark: this.remarkForm.value
      }).then(res => {
        this.allergyLoading = false;
        this.$message({
          type: 'success',
          message: '更新成功'
        })
      }).catch((e) => {
        if (e.msg) {
          this.$message({
            type: 'error',
            message: e.msg
          })
        }
      })
    },
    // 更新过敏史
    updateAllergyHistory() {
      this.allergyLoading = true;
      this.$ajax.updatePatientDiseaseInfo({
        rcsLogId: this.$route.query.id,
        historyPresentIllness: this.isAllergyInput
      }).then(res => {
        this.allergyLoading = false;
        this.$message({
          type: 'success',
          message: '更新成功'
        })
      }).catch((e) => {
        if (e.msg) {
          this.$message({
            type: 'error',
            message: e.msg
          })
        }
      })
    },
    handleChangeUpload(val, key) {
      console.log(val, key)
      let data = {
        content: val,
        packageType: 4,
        contentType: 1,
        roomId: this.$route.query.id,
        timestamp: new Date().getTime()
      }
      this.$setWsRemote.send(4, data);
    },
    getsenderType(type) {
      let typeName = '';
      dict.roleIds.forEach((item) => {
        if (item.id === type) {
          typeName = item.name;
        }
      });
      return typeName;
    },
    getDetail() {
      this.$ajax.getConsultationChatRecord({
        roomId: this.$route.query.id
      }).then(res => {
        this.chatRoomMsgList = res.data.map(item => {
          return {
            msgUserName: item.sender,
            msgText: item.content,
            msgDate: item.createTime,
            msgType: item.contentType,
            senderType: this.getsenderType(item.senderType),
          }
        })
        this.scrollContentBottom();
      })
      this.$ajax.getMyConsultationList({
      }).then(res => {
        // 0已取消 1待审核 2审核通过 3会诊中 4已结束
        // map
        let statusMap = {
          0: "已取消",
          1: "待审核",
          2: "审核通过",
          3: "会诊中",
          4: "已结束"
        }
        let data = res.data.find(item => item.id == this.$route.query.id) || {}
        if (data.diagnosisJson) {
          data.diagnosisJson = JSON.parse(data.diagnosisJson)
        }
        if (data.expertDoctorList) {
          let expertDoctorName = data.expertDoctorList.map(item => item.expertDoctorName).join(',')
          data.expertDoctorName = expertDoctorName
        }
        this.doctorList = (data.expertDoctorList || []).map(item => {
          return {
            ...item,
            type: '专家'
          }
        })
        this.applyForm = {
          ...data,
          statusName: statusMap[data.status],
        };
        console.log(this.applyForm,'applyForm');

        this.logId = data.inquiryLogId;
        //获取患者信息
        let para = {
          id: data.inquiryLogId,
          webToken: this.$authInfo.webToken()
        };
        this.$ajax
          .getAllInfo(para)
          .then(res => {
            this.setPatientInfo(res)
          })
          .catch(err => {});


        /**
         * 初始化远程会诊的websocket
         */
        // if (this.$authInfo.webToken()) {
        //   const wsuri = "wss://" + this.$global.remoteSocket;
        //   this.$setWsRemote.initWebSocket(wsuri, this.$authInfo.webToken());
        // }
        this.$setWsRemote.send(1, { token: this.$authInfo.webToken() });
      })
    },
    setPatientInfo(res) {
      this.patientObj = res.data || {};
    },
    // 查看病例
    checkCase() {
      this.$nextTick(() => {
        if (this.$global.platform("lj")) {
          this.$refs.caseHistory.onOpen("his", this.patientObj);
        } else {
          if (this.$global.isNewCase) {
            this.$refs.caseHistory.onOpen("ca", this.patientObj);
          } else {
            this.$refs.caseHistory.onOpen("normal", {
              caseInfo: this.patientObj,
              idCard: this.patientObj.patientIdcard
            });
          }
        }
      });
    },
    // 远程影像
    remoteVideo() {
      this.$message({
        message: "功能开发中",
        type: "warning"
      });
    },
    // 结束会诊
    closeRemote() {
      let that = this
      // 对话框关闭，输入意见
      this.$prompt("请输入会诊意见", "结束会诊", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入会诊意见"
      })
        .then(({ value }) => {
          let loadingInstance = Loading.service({ fullscreen: true });
          that.$ajax.endConsultation({
            id: that.$route.query.id,
            proposal: value
          }).then((res) => {
            that.$message({
              type: "success",
              message: "结束会诊成功"
            });
            // res.esignUrl = 'https://oss.yixianmedical.com/rcs-file/img/2024/12/02/1733123087923.png'
            if (res.esignUrl) {
               this.esignUrl = res.esignUrl
              this.esignUrlDialog = true
            } else {
              that.$router.replace({
                path: '/home'
              })
            }
          }).catch(e => {
            console.log(e)
            if (e.msg) {
              that.$message({
                type: "error",
                message: e.msg
              });
            }
          }).finally(() => {
            loadingInstance.close();
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消结束会诊"
          });
        });
    },
    handleClosePage() {
      this.$router.back()
    },
    handleRemark() {
      if (this.isExpert) {
        // 编辑弹窗
      } else {
        // 查看弹窗
      }
    },
    handleDiagnosis() {},
    handleHistoryPresentIllness() {},

    openMenu(data, e) {
      //是否弹出撤回功能
      this.msgData = data;
      let x = e.layerX;
      let y = e.layerY;
      this.top = y;
      this.left = x;

      var timeNow = this.formatDate(new Date());
      var timePass = data.msgDate;
      var date1 = new Date(timePass);
      var date2 = new Date(timeNow);
      var s1 = date1.getTime(),
        s2 = date2.getTime();
      var total = (s2 - s1) / 1000;
      var day = parseInt(total / (24 * 60 * 60)); //计算整数天数
      var afterDay = total - day * 24 * 60 * 60; //取得算出天数后剩余的秒数
      var hour = parseInt(afterDay / (60 * 60)); //计算整数小时数
      var afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60; //取得算出小时数后剩余的秒数

      // var min = parseInt(afterHour / 60); //计算整数分
      // var afterMin = total - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60; //取得算出分后剩余的秒数

      if (this.friendId == data.friendId) {
        if (afterHour > 120) {
          this.isWithdraw = false;
          this.$alert("消息发送已超过2分钟，不可进行撤回操作", "提示", {
            confirmButtonText: "确定",
            callback: action => {}
          });
        } else {
          this.isWithdraw = true;
        }
      } else {
        this.isWithdraw = false;
      }
    },
    withdrawHandle() {
      //撤回功能
      /**
       * 1	登录返回的信息
       * 2	未定义
       * 3	被邀请加入会诊
       * 4	接收到单条聊天信息
       * 5	未定义
       */
      let data = {
        msgUserName: this.applyForm.doctorName, //医生名称
        id: this.msgData.id, //信息id
        msgText: this.applyForm.doctorName + "医生撤回了一条消息", // 信息体
        friendId: this.friendId, // 接收方的用户imID
        inquiryLogId: this.logId, // 本次问诊的id
        msgType: 4, // 消息类型：0文字消息、1固定表情 3 图片url 4 撤回
        msgDate: this.formatDate(new Date()), // 发送时间
        packageType: 4
      };
      this.$setWsRemote.send(4, data);
      this.isWithdraw = false;
    },
    doctorSendMsg() {
      //发送信息
      if (this.sendMsgToPatient) {
        let data = {
          content: this.sendMsgToPatient,
          packageType: 4,
          contentType: 2,
          roomId: this.$route.query.id,
          timestamp: new Date().getTime()
        }
        this.$setWsRemote.send(4, data);
        this.sendMsgToPatient = "";
      }
      this.scrollContentBottom();
    },

    scrollContentBottom() {
      //聊天置于底部
      this.$nextTick(() => {
        setTimeout(() => {
          let msg = document.getElementById("scrollContent"); // 获取对象
          if (msg) msg.scrollTop = msg.scrollHeight; // 滚动高度
        }, 100);
      });
    },
    // 过滤日期格式
    formatDate(date, format) {
      if (format === undefined) {
        format = "YY-MM-DD hh:mm:ss";
      }
      var year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      var preArr = Array.apply(null, Array(10)).map(function(elem, index) {
        return "0" + index;
      });
      var newTime = format
        .replace(/YY/g, year)
        .replace(/MM/g, preArr[month] || month)
        .replace(/DD/g, preArr[day] || day)
        .replace(/hh/g, preArr[hour] || hour)
        .replace(/mm/g, preArr[min] || min)
        .replace(/ss/g, preArr[sec] || sec);
      return newTime;
    },
    closeMenu() {
      //关闭撤回
      this.isWithdraw = false;
    },
    createRoom() {
      this.$setWsRemote.send(5, {
        roomId: this.$route.query.id,
        packageType: 5,
        timestamp: new Date().getTime()
      });
    },
    inviteDoctorJoinRoom(message = false) {
      let inviteList = []
      if (this.isExpert) {
        // 专家那么剔除自己
        inviteList = this.doctorList.filter(item => item.expertDoctorId !== this.$authInfo.getUser().id)
        inviteList.push({
          expertDoctorId: this.applyForm.doctorId,
          expertDoctorName: this.applyForm.createBy,
          type: '医生'
        })
      } else {
        inviteList = this.doctorList
      }
      this.inviteList = inviteList
      inviteList.forEach(item => {
        let data = {
          receiverID: item.expertDoctorId, // 邀请人id
          receiverType: 'doctor', // 邀请人类型
          roomId: this.$route.query.id, // 房间id
          message: `邀请${item.expertDoctorName}医生你加入会诊`, // 邀请消息
          packageType: 2, // 包类型
          timestamp: new Date().getTime(), // 时间戳
        };
        this.$setWsRemote.send(2, data);
      })
      if (this.message) {
        this.$message({
          type: 'success',
          message: '邀请成功'
        })
      }
    },
    // 邀请病人
    invitePatientJoinRoom() {
      let data = {
        receiverID: this.applyForm.userId, // 邀请人id
        receiverType: 'P', // 邀请人类型
        roomId: this.$route.query.id, // 房间id
        message: '邀请患者加入会诊', // 邀请消息
        packageType: 2, // 包类型
        timestamp: new Date().getTime(), // 时间戳
      };
      console.log('邀请患者加入会诊',data);
      this.$setWsRemote.send(2, data);
    },
    openDialog() {
      this.allergyHistoryDialog = true;
      this.isAllergyInput = this.applyForm.historyPresentIllness || "";
    },
    closeDialog() {
      this.allergyHistoryDialog = false;
    },
    openDialogRemark() {
      this.remarkDialog = true
      this.remarkForm.value = this.applyForm.remark || ''
    },

    /*** 诊断弹框 start ***/
    openDiagnosisDialog(data = []) {
      this.$nextTick(() => {
        this.$refs.diagnosisDialogComponent.onOpen({
          logId: this.logId,
          data
        });
      });
    },
    closeDialogComponent(data) {
      this.applyForm.diagnosis = data.diagnosis
      this.applyForm.diagnosisJson = JSON.parse(data.diagnosisJson)
    },
    /*** 诊断弹框 end ***/
  },
  created() {
    this.$store.commit('SET_REMOTE_ID', this.$route.query.id)
    // 获取oss参数
    this.$ajax
        .uploadFileBridge({
          dir: "webpc/"
        })
        .then(res => {
          let { code, data } = res;
          if (code === 1) {
            console.log(data)
            this.ossParams = JSON.stringify(data)
          }
        })
        .catch(err => {
          this.$util.message(err.msg);
        });
    this.getDetail();
  }
};
</script>
<style lang="scss">
.qr-dialog {
  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  .qr-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qr-wrapper {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 16px;
  }

  .qr-img {
    max-width: 180px;
    max-height: 180px;
  }

  .qr-loading {
    text-align: center;
    color: #909399;

    .el-icon-loading {
      font-size: 24px;
      margin-bottom: 8px;
    }

    p {
      margin: 0;
      font-size: 14px;
    }
  }

  .qr-tip {
    margin: 0 0 16px;
    font-size: 14px;
    color: #606266;
  }

  .refresh-btn {
    color: #409EFF;

    i {
      margin-right: 4px;
    }

    &:hover {
      color: #66b1ff;
    }
  }
}

.consult-container {
  .dialog-frame {
    min-width: initial !important;
    max-width: initial !important;
  }
  .video-center-top {
    min-height: 450px !important;
  }

  .rtc-video-wrapper {
    width: 100%;
    .rtc__remote {
      min-height: 600px;
    }
  }
}
.box-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  .el-card__body {
    height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
  }
}

.my-user-box {
  min-width: 1200px;
  overflow: auto;
}
.meeting-box {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
}
.remote-title {
  text-align: center;
  font-size: 18px;
  color: #333333;
  padding: 24px 0;
}
.handle-box {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 24px;
  .handle-item {
    border: 1px solid #409eff;
    border-radius: 4px;
    padding:10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    font-size: 12px;
    width: 45px;
    height: 45px;
    color: #409eff;
    cursor: pointer;
  }
}

.consult-upload {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100%;
  opacity: 0;
  img {
    width: 40px;
    height: 40px;
  }
}
.content {
  padding: 10px;
  .content-border {
    border: 1px solid;
    padding: 20px;
  }
  .operate {
    & > div {
      cursor: pointer;
    }
  }
  .start-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    cursor: pointer;
    position: relative;
  }
}
</style>

<style lang="scss" src="@/style/page/vedio.scss"></style>
